<template>
    <div class="user">
            <table class="user_message" name="">
                <h4>基本信息</h4>
                <tr>
                    <td class="input-message">昵称: </td>
                    <td>        <el-input v-model="user.nickname" placeholder="请输入内容"></el-input></td>
                </tr>
                <tr>
                    <td class="input-message">邮箱: </td>
                    <td><el-input v-model="user.email" placeholder="请输入内容" disabled></el-input></td>
                </tr>

                <h4>详细信息</h4>
                <tr>
                    <td class="input-message">性别:</td>
                    <td>
                        <el-radio v-model="user.gender" label="1">男</el-radio>
                       <el-radio v-model="user.gender" label="2">女</el-radio>
                    </td>
                </tr>

                <tr>
                    <td class="input-message">
                        教育水平:
                    </td>
                    <td>
                        <el-select v-model="user.education" placeholder="请选择">
                            <el-option
                                    v-for="item in educations"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td class="input-message">月收入:</td>
                    <td>
                        <el-select v-model="user.income" placeholder="请选择">
                            <el-option
                                    v-for="item in incomes"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </td>
                </tr>
            </table>
            <div class="user-bottom">
                <p>我们将根据好孩子官方商城 《隐私条款》 对您提供的信息妥善保密</p>
                <el-button type="primary" @click="inputSubmit">保存信息</el-button>
            </div>
    </div>
</template>

<script>
    import {changeInformation} from "@/network/profile";

    export default {
        name: "User",
        data() {
            return {
                user: this.$store.state.lognUser,
                input: '',
                radio: '1',
                educations: [
                    { value: "1", label: '初中' },
                    { value: "2", label: '高中' },
                    { value: "3", label: '中专' },
                    { value: "4", label: '大专' },
                    { value: "5", label: '大学' },
                    { value: "6", label: '硕士' },
                    { value: "7", label: '博士' },
                    { value: "8", label: '其他' },
                ],
                incomes: [
                    { value: "1", label: '50000以上' },
                    { value: "2", label: '25000~50000 '},
                    { value: "3", label: '15000~25000' },
                    { value: "4", label: '10000~15000' },
                    { value: "5", label: '5000~10000' },
                    { value: "6", label: '2500~5000' },
                    { value: "7", label: '2500以下' },
                ]
            }
        },
        methods: {
            inputSubmit() {
                changeInformation(this.user).then(res=>{
                    if (res.data.res_code === 1) {
                        alert("修改成功,请重新登录");
                        this.$store.dispatch('signOut')
                        this.$router.push('/')
                    }else {
                        alert('服务器忙，稍后重试')
                    }
                })
            },
            upImage() {

            }
        }
    }
</script>

<style scoped>

    .user_message {
        font-size: 15px;
        margin: 20px;
    }
    .user_message td {
        background-color: #f9f9f9;
        border: 1px solid #ededed;
        width: 500px;
    }


  .user_message tr {
      height: 35px;
      line-height: 35px;
  }
    .user_message .input-message {
        width: 100px;
        text-align: right;
    }

    .user-bottom {
        text-align: center;

    }

    .user_message h4:before {
        content: '';
        display: inline-block;
        width: 10px;
        height:10px;
        border: 3px solid #ff4500;
        border-radius: 50%;
        margin-top: 7px;
        margin-left: 7px;
    }
    .user_message h4 {
        display: block;
        height: 20px;
        width: 100%;
        line-height: 20px;
        padding-left: 20px;
    }
</style>